<template>
  <!--网站登录页面-->
  <div class="login" :style="'background-image: url(' + bg + ')'">
    <div class="main">
      <div class="title">用户登录</div>
      <form>
        <div>
          <!--用户名-->
          <div class="user">
            电话号码
            <i>*</i>
          </div>
          <el-input v-model="user.telephone" placeholder="电话号码"></el-input>
        </div>
        <div>
          <!--密码-->
          <div class="user">
            密码
            <i>*</i>
          </div>
          <el-input
            placeholder="请输入密码"
            v-model="user.password"
            show-password
          ></el-input>
        </div>
        <!--这里写了登录的点击事件clickLogin-->
        <div class="btn">
          <el-button plain @click="clickLogin">登录</el-button>
        </div>
        <!-- 点击跳到注册页面
        <div class="switch" @click="$router.push('/signin')">注册用户</div> -->
      </form>
    </div>
  </div>
</template>

<script>
//页面使用后端接口，直接import导入，下面直接调用就可以了
import { getqueryTelephoneLogin } from "@/util/users.js";

export default {
  data() {
    return {
      user: {}, //用户对象参数
      bg: "http://175.178.92.128:8087/campus_help_system/images/reg_bg_min.jpg",
    };
  },
  created() {
    console.log(window.localStorage.getItem("id"));
    if (window.localStorage.getItem("id") != null) {
      this.$router.push("/");
    }
  },
  methods: {
    //登陆方法
    async clickLogin() {
      //调用后端接口把登录参数传到后端去
      let { data: res } = await getqueryTelephoneLogin(this.user);
      if (res.status !== 2000) {
        //状态值不等于2000，返回一个报错信息
        return this.$message.error(res.msg);
      }

      if (res.data.role != "管理员") {
        return this.$message.error("权限不够，请用管理员帐号登录");
      }
      // 用户数据保存在本地 localStorage
      window.localStorage.setItem("id", res.data.id);
      window.localStorage.setItem("userNo", res.data.userNo);
      window.localStorage.setItem("userName", res.data.userName);
      window.localStorage.setItem("role", res.data.role);
      window.localStorage.setItem("created_at", res.data.created_at);
      window.localStorage.setItem("professional", res.data.professional);
      window.localStorage.setItem("classes", res.data.classes);
      window.localStorage.setItem("telephone", res.data.telephone);
      window.localStorage.setItem("password", res.data.password);
      window.localStorage.setItem("images", res.data.imagesUrl);
      this.$store.commit("getImageTab", res.data.imagesUrl);
      this.$message.success("登录成功");
      this.$router.push("/admin");
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  min-height: inherit;
  background-image: url(http://175.178.92.128:8087/campus_help_system/images/reg_bg_min.jpg);
  background-repeat: no-repeat;
  background-size: 120% auto;
  background-position: center center;
  padding: 50px 100px 100px 50px;
  position: relative;
  .main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 40px 80px;
    border-radius: 16px;
    .title {
      text-align: center;
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 24px;
    }
    & > form {
      .user {
        margin-bottom: 8px;
        i {
          color: red;
        }
      }
      & > div {
        margin-bottom: 16px;
        & > input {
          height: 40px;
          width: 100%;
          padding: 0 16px;
        }
      }
      .btn {
        margin-top: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        & > button {
          height: 44px;
          background-color: #fff;
          border-radius: 8px;
          border: 1px solid #fff;
          width: 100%;
        }
      }
      .switch {
        cursor: pointer;
        text-align: right;
        color: #333;
      }
    }
  }
}
</style>
